body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f0f2f5;
    color: #333;
    overflow: hidden; /* Prevent body scroll, App will manage its own scroll */
}

#app {
    height: 100%;
    width: 100%;
}

/* App布局样式 */
.app-container {
    display: flex;
    height: 100vh; /* 使应用占满整个视口高度 */
    font-family: sans-serif;
}

.left-sidebar, .right-sidebar {
    width: 20%; /* 或固定宽度，如 250px */
    padding: 15px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    overflow-y: auto; /* 如果内容过多则滚动 */
}

.center-column {
    flex-grow: 1; /* 中间列占据剩余空间 */
    padding: 15px;
    display: flex;
    flex-direction: column; /* 使内部区域垂直排列 */
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}

.topic-tag-filter-area, .message-input-area {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.chat-display-wrapper {
    flex-grow: 1; /* 聊天显示区占据中间列的主要空间 */
    overflow-y: auto; /* 如果聊天内容过多则滚动 */
    display: flex; /* 确保 ChatDisplayArea 能正确填充 */
    flex-direction: column;
}

.chat-display-wrapper .chat-display-area { /* 确保子组件填满 */
    flex-grow: 1;
}

.error-message, .loading-message {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffdddd;
    border: 1px solid #ff0000;
    color: #ff0000;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
}

.loading-message {
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    color: #333;
}

h3 {
    margin-top: 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

pre {
    background-color: #eee;
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap; /* 允许长行换行 */
    word-break: break-all; /* 强制断词 */
    max-height: 200px;
    overflow-y: auto;
}

details {
    margin-top: 10px;
}

summary {
    cursor: pointer;
    font-weight: bold;
}

/* ChatDisplayArea组件样式 */
.chat-display-area {
    border: 1px solid #ccc;
    padding: 10px;
    height: 400px; /* 或任何期望的高度 */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.messages-container {
    flex-grow: 1;
}

.empty-chat-message {
    text-align: center;
    color: #888;
    margin-top: 20px;
}

.chat-message {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 4px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
}

.chat-message strong {
    font-weight: bold;
}

.message-meta {
    font-size: 0.8em;
    color: #555;
    margin-top: 4px;
}

.timestamp {
    margin-right: 10px;
}

.tags {
    font-style: italic;
}
/* Styles for MessageInputArea.js layout */
.message-input-area-flex-container {
  display: flex;
  flex-direction: column;
  /* padding: 10px; /* This might be inherited or set on parent */
  /* border-top: 1px solid #ccc; /* This might be inherited or set on parent */
  gap: 8px; /* Space between textarea and controls row */
}

.message-textarea {
  flex-grow: 1;
  min-height: 80px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: none; /* Disable textarea resizing */
  box-sizing: border-box;
  width: 100%; /* Ensure it takes full width of its flex container */
}

.input-controls-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.tags-input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.send-button {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.send-button:hover {
  background-color: #0056b3;
}
/* Styles for PrivateThoughtViewer.js */
.private-thought-viewer {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  max-height: 400px; /* Or any desired max height */
  overflow-y: auto;
}

.private-thought-viewer h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}

.private-thought-viewer .notice,
.private-thought-viewer .loading,
.private-thought-viewer .no-logs {
  color: #777;
  padding: 10px;
  text-align: center;
}

.private-thought-viewer .error-message {
  color: red;
  padding: 10px;
  border: 1px solid red;
  background-color: #ffe0e0;
  border-radius: 3px;
  margin-top: 10px;
}

.private-thought-viewer .log-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.private-thought-viewer .log-item {
  padding: 8px;
  border-bottom: 1px solid #eee;
  font-size: 0.9em;
}

.private-thought-viewer .log-item:last-child {
  border-bottom: none;
}

.private-thought-viewer .log-timestamp {
  font-weight: bold;
  color: #555;
  font-size: 0.85em;
  margin-bottom: 3px;
}

.private-thought-viewer .log-type {
  color: #007bff; /* Blueish color for type */
  font-style: italic;
  margin-bottom: 3px;
  font-size: 0.8em;
}

.private-thought-viewer .log-summary {
  color: #444;
  white-space: pre-wrap; /* Preserve whitespace and newlines in summary */
  word-break: break-word;
}
/* Styles for RightSidebar.js */
.right-sidebar-container {
  /* Styles for the right sidebar container itself */
  padding: 10px;
  background-color: #f8f9fa; /* Example background color */
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ParticipantList and PrivateThoughtViewer will need their own flex properties
   if they are to share space within this column (e.g. ParticipantList fixed height,
   PrivateThoughtViewer takes remaining space and is scrollable).
   These might be better set within RightSidebar's template or on the child components themselves
   if more complex layout than simple stacking is needed.
   For now, assuming they stack vertically.
*/
.right-sidebar-container .participant-list-empty {
    text-align: center;
    color: #888;
    padding: 10px;
}
/* Styles from TagFilter.vue */
.tag-filter-container {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 15px;
}

.tag-filter-container h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1em;
  color: #333;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 0.9em;
}

.tag-item input[type="checkbox"] {
  margin-right: 5px;
  cursor: pointer;
}

.tag-item label {
  cursor: pointer;
  user-select: none; /* Prevent text selection on click */
}

.tag-item:hover {
  background-color: #e0e0e0;
}
/* End of styles from TagFilter.vue */
/* Styles from App.vue */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #f0f2f5; /* Light grey background for the whole app */
}

.app-header {
  background-color: #007bff; /* Primary blue */
  color: white;
  padding: 10px 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.app-header h1 {
  margin: 0;
  font-size: 1.5em;
}

.main-content {
  display: flex;
  flex-grow: 1;
  overflow: hidden; /* Prevent scrollbars on main content if sidebars handle their own */
  padding: 10px; /* Add some padding around the three columns */
  gap: 10px; /* Space between columns */
}

.left-sidebar-area,
.right-sidebar-area {
  width: 20%; /* Adjust as needed */
  min-width: 200px; /* Minimum width */
  background-color: #ffffff; /* White background for sidebars */
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 4px;
  overflow-y: auto; /* Allow scrolling within sidebars */
  display: flex; /* Added for flex layout of children */
  flex-direction: column; /* Stack children vertically */
  gap: 10px; /* Space between LeftSidebar and WhiteboardPanel */
}

.whiteboard-section {
  /* Styles for WhiteboardPanel if it needs specific layout within LeftSidebar area */
  /* For example, if you want it to take a certain portion of space or have margins */
  /* margin-top: 10px; /* Example: add some space above whiteboard */
  /* border-top: 1px solid #eee; /* Example: separator line */
  /* padding-top: 10px; */
}

.center-column-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #ffffff; /* White background for center */
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 4px;
  /* overflow-y: auto; /* Let children manage their scroll */
  gap: 10px; /* Add gap between children of center column */
}

/* Ensure chat display area takes up most space and input area has fixed/min height */
.center-column-area > .chat-display-area { /* Targeting direct child */
  flex-grow: 1;
  overflow-y: auto; /* Allow chat to scroll */
  min-height: 100px; /* Minimum height for chat area */
}

.center-column-area > .message-input-area { /* Targeting direct child */
  flex-shrink: 0; /* Prevent input area from shrinking */
  /* height: 120px; /* Example fixed height, or rely on content + padding */
}


.app-footer {
  background-color: #e9ecef; /* Lighter grey for footer */
  color: #6c757d; /* Muted text color */
  padding: 8px 20px;
  text-align: center;
  font-size: 0.8em;
  border-top: 1px solid #dee2e6; /* Separator line */
}

/* Remove the <pre> style if not used anymore */
/*
pre {
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
  white-space: pre-wrap;
  word-wrap: break-word;
}
*/
/* End of styles from App.vue */
/* Styles from CenterColumn.vue */
.center-column-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Takes up available space */
  height: 100%;
  padding: 0; /* No padding here, children will manage their own */
  box-sizing: border-box;
  overflow: hidden; /* Prevent content from overflowing the column itself */
}

/* Child components will need their own styling for spacing, scrolling etc. */
/* For example, ChatDisplayArea will need to be scrollable and take most space */
/* End of styles from CenterColumn.vue */

/* Styles from ChatMessageItem.vue */
/* Note: highlight.js CSS (e.g., github.css) should be imported globally if used. */

.chat-message-item {
  display: flex;
  margin-bottom: 8px;
  max-width: 85%; /* Prevent messages from taking full width */
}

.chat-message-item.current-user { /* Combined for global CSS */
  margin-left: auto; /* Aligns to the right */
  flex-direction: row-reverse;
}

.chat-message-item.current-user .message-bubble {
  background-color: #dcf8c6; /* Light green for current user */
  border-radius: 15px 15px 5px 15px; /* Rounded corners, less on bottom-left */
  align-self: flex-end;
}

.chat-message-item.other-user { /* Combined for global CSS */
  margin-right: auto; /* Aligns to the left */
}

.chat-message-item.other-user .message-bubble {
  background-color: #ffffff; /* White for other users */
  border: 1px solid #e0e0e0;
  border-radius: 15px 15px 15px 5px; /* Rounded corners, less on bottom-right */
  align-self: flex-start;
}

.chat-message-item .message-bubble { /* Scoped to .chat-message-item */
  padding: 10px 15px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  min-width: 100px;
}

.chat-message-item .message-header { /* Scoped */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.chat-message-item .sender-nickname { /* Scoped */
  font-weight: bold;
  font-size: 0.9em;
  color: #333;
  margin-right: 8px;
}

.chat-message-item.other-user .sender-nickname { /* Scoped and specific */
    color: #007bff;
}

.chat-message-item .timestamp { /* Scoped, potentially overrides global .timestamp if more specific */
  font-size: 0.75em;
  color: #888;
  /* margin-right: 10px; is already in global .timestamp, this one is more specific if needed */
}

.chat-message-item .message-content { /* Scoped */
  font-size: 0.95em;
  line-height: 1.5;
  color: #222;
}
.chat-message-item .message-content pre { /* Was :deep(pre) */
  background-color: #f0f0f0;
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
}
.chat-message-item .message-content code { /* Was :deep(code) */
  font-family: 'Courier New', Courier, monospace;
  background-color: #eef;
  padding: 1px 3px;
  border-radius: 3px;
}
.chat-message-item .message-content p:last-child { /* Was :deep(p:last-child) */
    margin-bottom: 0;
}

.chat-message-item .message-tags { /* Scoped */
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chat-message-item .tag-item { /* Scoped */
  cursor: pointer;
  margin-right: 5px;
}

.chat-message-item .message-actions { /* Scoped */
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.chat-message-item .message-bubble:hover .message-actions { /* Scoped */
  opacity: 1;
}

.chat-message-item .action-button.el-button { /* Scoped and specific to ElButton */
  padding: 3px 6px;
  margin-left: 5px;
}
/* End of styles from ChatMessageItem.vue */

/* Styles from LeftSidebar.vue */
.left-sidebar-container {
  /* Styles for the left sidebar container itself */
  padding: 10px;
  background-color: #f8f9fa; /* Example background color */
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* End of styles from LeftSidebar.vue */

/* Styles from LogEntryDetail.vue */
.log-entry-detail-scrollbar {
  flex-grow: 1;
  background-color: #fdfdfd;
}
.log-entry-detail-container {
  padding: 10px;
}

.log-entry-detail-container .back-button.el-button {
  margin-bottom: 15px;
}

.log-entry-detail-container .detail-content h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  font-size: 1.2em;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.log-entry-detail-container .detail-section {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #f0f0f0;
}
.log-entry-detail-container .detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.log-entry-detail-container .detail-label {
  font-weight: bold;
  color: #555;
  display: block;
  margin-bottom: 3px;
  font-size: 0.9em;
}

.log-entry-detail-container .detail-value {
  font-size: 0.9em;
  color: #222;
  word-wrap: break-word;
}

.log-entry-detail-container .code-font {
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

.log-entry-detail-container .pre-scrollbar {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
.log-entry-detail-container .scrollable-pre {
  background-color: #f5f5f5;
  padding: 8px;
  margin: 0;
}

.log-entry-detail-container .copy-button.el-button {
  float: right;
  margin-left: 10px;
}

.log-entry-detail-container .error-section .detail-label {
  color: #d9534f;
}
.log-entry-detail-container .error-text {
  color: #d9534f;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.log-entry-detail-container .no-detail-message.el-empty,
.log-entry-detail-container .loading-message { /* .loading-message is also used inside this component */
  padding: 20px;
  margin: auto;
}
/* Ensure the specific loading message inside log-entry-detail is also styled if not covered by global .loading-message */
.log-entry-detail-container > .loading-message {
    text-align: center;
    color: #888;
    font-style: italic;
}


.log-entry-detail-container .tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.log-entry-detail-container .detail-tag.el-tag {
  font-family: 'Courier New', Courier, monospace;
}
/* End of styles from LogEntryDetail.vue */

/* Styles from LogEntryList.vue */
.log-entry-list-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.log-entry-list-container .log-list-scrollbar {
  flex-grow: 1;
}

.log-entry-list-container .log-entry-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.log-entry-list-container .empty-list-message.el-empty {
  padding: 15px 0;
  margin: auto;
  flex-grow: 1;
}

.log-entry-list-container .pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 5px;
  border-top: 1px solid #eee;
  background-color: #f9f9f9;
  flex-shrink: 0;
}
/* End of styles from LogEntryList.vue */

/* Styles from LogEntryListItem.vue */
.log-entry-list-item {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.log-entry-list-item:last-child {
  border-bottom: none;
}

.log-entry-list-item:hover {
  background-color: #f9f9f9;
}

.log-entry-list-item .entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.log-entry-list-item .timestamp { /* More specific than global .timestamp */
  font-size: 0.8em;
  color: #777;
}

.log-entry-list-item .call-type {
  font-size: 0.8em;
  font-weight: 500;
  color: #007bff;
  background-color: #e7f3ff;
  padding: 2px 6px;
  border-radius: 3px;
}

.log-entry-list-item .outcome-summary {
  font-size: 0.9em;
  color: #333;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-entry-list-item .public-message-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 0.75em;
  color: #28a745;
  background-color: #e9f7ef;
  padding: 2px 5px;
  border-radius: 3px;
}
/* End of styles from LogEntryListItem.vue */

/* Styles from ParticipantItem.vue */
.participant-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  user-select: none;
}

.participant-item:last-child {
  border-bottom: none;
}

.participant-item:hover {
  background-color: #e9f5ff;
}

.participant-item.is-selected {
  background-color: #cfe2ff;
  font-weight: 500;
}
.participant-item.is-selected:hover {
  background-color: #bad3ff;
}

.participant-item .participant-avatar-el {
  color: white;
  font-weight: bold;
  font-size: 0.9em;
}

.participant-item .participant-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.participant-item .nickname {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.participant-item .role-icon.el-icon,
.participant-item .host-icon.el-icon,
.participant-item .status-icon.el-icon {
  margin-right: 4px;
  vertical-align: middle;
  font-size: 1em;
}
.participant-item .host-icon.el-icon {
  color: #FFD700;
}

.participant-item .role-status {
  font-size: 0.8em;
  color: #666;
}

.participant-item .status-indicator {
  font-style: italic;
}
.participant-item .status-indicator.thinking {
  color: #ffa500;
}
.participant-item .status-indicator.desire_to_speak {
  color: #28a745;
}

.participant-item .desire-to-speak-indicator.el-icon {
  font-size: 1.2em;
  margin-left: auto;
  padding-left: 5px;
  color: #28a745;
  vertical-align: middle;
}
/* End of styles from ParticipantItem.vue */

/* Styles from TagInput.vue */
.tag-input-select {
  width: 100%;
}
/* End of styles from TagInput.vue */

/* Styles from WhiteboardInput.vue */
.whiteboard-input-container {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.whiteboard-input-container .file-path-input-el.el-input {
  flex-grow: 1;
}
/* End of styles from WhiteboardInput.vue */

/* Styles from WhiteboardItem.vue */
.whiteboard-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  transition: background-color 0.2s ease-in-out;
}

.whiteboard-item:last-child {
  border-bottom: none;
}

.whiteboard-item:hover {
  background-color: #f0f8ff;
}

.whiteboard-item .item-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  margin-right: 10px;
}

.whiteboard-item .item-name {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

.whiteboard-item .remove-button-el.el-button {
  margin-left: 5px;
}
/* End of styles from WhiteboardItem.vue */